<template>
	<view>
		<uNavbar title="忘记密码"></uNavbar>
		<!-- <view class="navbar_box">
			<u-icon class="zjt" name="arrow-left" color="#ffffff" size="20" @click="goBack"></u-icon>
			<text>忘记密码</text>
		</view> -->
		<view class="mask"></view>
		<view class="logos flex_ZC">
			<view class="modular_box">
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="text" placeholder="请输入账号" maxlength="11" placeholderStyle="color: #c0c4cc90" v-model.trim="account"></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="text" placeholder="请输入手机号" maxlength="11" placeholderStyle="color: #c0c4cc90" v-model.trim="phone"></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input placeholder="请输入验证码" maxlength="6" placeholderStyle="color: #c0c4cc90" v-model.trim="sms_code">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="varify2()" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</view>
				<view v-if="isyzm">
					<web-view :fullscreen="false"  src="/static/local.html" @message="callback2">测试</web-view>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="password" placeholder="请设置新密码" maxlength="32" placeholderStyle="color: #c0c4cc90" v-model.trim="password"></u-input>
				</view>
				<view class="binding flex_dq" style="margin-top: 30px;">
					<u-input type="password" placeholder="请确认新密码" maxlength="32" placeholderStyle="color: #c0c4cc90" v-model.trim="re_password"></u-input>
				</view>

				<view class="log_out flex_c" :class="check?'bgTaggle':''"  @click="isComplete">
					<image class="highlights" v-if="check" src="../../static/image/mask.png" mode=""></image>
					<text>确认</text>
					</view>
			</view>
		</view>

		<!-- 协议 -->
<!-- 		<view class="information entry">
			<view class="zhengce flex_c" @click="toggleAgree">
				<image src="../../static/icon/i_checkbox1.png" mode="" v-if="agreement == 0"></image>
				<image src="../../static/icon/i_checkbox.png" mode="" v-if="agreement == 1"></image>
			</view>
			<view class="information_box flex_dq">
				<text>登录代表你已经同意</text>
				<text class="underline" @click.stop="showAgreements(2)">《用户协议》</text>
				<text>和</text>
				<text class="underline" @click.stop="showAgreements(3)">《隐私政策》</text>
			</view>
		</view> -->
		
		<u-popup mode="center" :show="isShowAgreement" @close="isShowAgreement = false" bgColor="transparent" >
			<view class="modal-content">
				<view class="title">《用户协议》</view>
				<scroll-view scroll-y>
					<view class="agreement-txt">
						<view class="rich-text-wrp">
							<u-parse :content="rickText"></u-parse>
						</view>
					</view>
				</scroll-view>
				<view class="close_btn" @click="hideAgreement">
					<text>关闭</text>
				</view>
			</view>
		</u-popup>
		
<!-- 		<u-popup :show="showVerify" mode="center" @close="showVerify = false,verCode = ''" closeable bgColor="transparent">
			<view class="promptss flex_ZC">
				<text class="f24">提示</text>
				<view class="random flex_dq">
					<view class="randomP flex_dq">
						<input type="text" v-model.trim="verCode"  placeholder="请输入验证码"  @confirm="isConfirm" />
					</view>
					<view class="canvas-img-code" @click="refresh()">
						<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
					</view>
				</view>
				<view class="prompt_ntm" @click="isCheck">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup> -->
	
	</view>
</template>

<script>
	import {forgetPassword,sendSms} from "../../api/login.js"
	export default {
		data() {
			return {
				tips: '',
				account:'',//账号
				phone: '', //手机号
				password: '', //密码
				re_password:'',//新密码
				agreement: 0, //选中状态
				sms_code: '', //验证码
				ruleState: false, //规则校验
				isShowAgreement: false,
				check: false, //监听用户是否输入内容
				showVerify:false,//验证码弹窗
				rickText: '用户协议',
				verCode:'',//随机验证码码
				width: 120,
				height: 45,
				canClick:true,
				isyzm:false,
				randstr:"",
				ticket:"",
			}
		},
		onLoad() {

		},
		// 监听事件
		watch: {
			phone(val) {
				if (uni.$u.test.mobile(this.phone)) {
					this.check = true
				} else {
					this.check = false
				}
			},
			password(val) {
				if (!uni.$u.test.isEmpty(this.password)) {
					this.check = true
				} else {
					this.check = false
				}
			},
			re_password(val) {
				if (!uni.$u.test.isEmpty(this.re_password)) {
					this.check = true
				} else {
					this.check = false
				}
			}
		},
		computed:{
			 isAlphaNumeric() {
			  const pattern = /^[A-Za-z0-9]+$/;
			  return pattern.test(this.account);
			}
		},
		methods: {
			callback2(res){
				let that=this
				that.isyzm=false
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					that.randstr=r.randstr
					that.ticket=r.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
				         console.log(1111111111,r);
			},
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr=res.randstr
					that.ticket=res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2(){
				// #ifdef APP
					if (uni.$u.test.isEmpty(this.phone)) {
						uni.$u.toast('请输入您的手机号');
					}else{
						this.isyzm=true
					}
				// #endif
				// #ifdef H5
					if (uni.$u.test.isEmpty(this.phone)) {
						uni.$u.toast('请输入您的手机号');
						
					}else{
						this.varify()
					}
					
				// #endif
			},
			varify() {
				let appid = '197018098'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();
			
			},
			// 重新获取
			codeChange(text) {
				this.tips = text;
			},
			// 前端随机验证码
			goVerify(){
				let that = this;
				this.showVerify = true
				setTimeout(function() {
					that.init();
				}, 800)
			},
			isCheck(){
				if (this.verCode.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
					uni.$u.toast('验证码不正确');
					return false;
				}
				this.showVerify = false
				this.getCode()
			},
			// 验证码
			getCode() {
				let that = this;
				let data = {
					phone:that.phone,
					scene:'forget_password',
					randstr:that.randstr,
					ticket:that.ticket
				}
				sendSms(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
			// 协议
			toggleAgree() {
				var that = this;
				var isAgree = that.agreement;
				console.log(isAgree);
				if (isAgree == 1) {
					that.agreement = 0;
				} else {
					that.agreement = 1;
				}
			},
			//弹出层
			showAgreements(id) {
				console.log(id);
				this.isShowAgreement = true;
				// this.userProtocol(id)
			},
			// 关闭弹窗
			hideAgreement() {
				this.isShowAgreement = false;
			},
			// 规则校验
			ruleValidation() {
				let that = this;
				let {
					account,
					phone,
					password,
					re_password,
					sms_code,
				} = that;
				// if (!agreement) {
				// 	uni.$u.toast('请勾选协议');
				// 	return;
				// }
				if (uni.$u.test.isEmpty(account)) {
					uni.$u.toast('请输入账号');
					return;
				}
				if (!this.isAlphaNumeric) {
					uni.$u.toast('账号仅支持字母和数字');
					return;
				}
				if (uni.$u.test.isEmpty(phone)) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!uni.$u.test.code(sms_code, 6)) {
					uni.$u.toast('验证码错误');
					return;
				}
				if (uni.$u.test.isEmpty(password)) {
					uni.$u.toast('请输入密码');
					return;
				}
				if (uni.$u.test.isEmpty(re_password)) {
					uni.$u.toast('请确认新密码');
					return;
				}
				if ((password !== re_password)) {
					uni.$u.toast('两次密码不一致');
					return;
				}
				this.ruleState = true
			},
			// 完成
			isComplete() {
				if (!this.canClick) {
				      return;
				 }
				this.ruleValidation()
				
				if (!this.ruleState) return;
				let data = {
					account:this.account,
					phone: this.phone,
					password: this.password,
					re_password: this.re_password,
					sms_code: this.sms_code,
				}
				this.canClick=false
				forgetPassword(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1500)
					}
					 setTimeout(() => {
					        this.canClick = true;
					}, 1000); // 设定一个点击间隔，防止频繁点击
					
				})
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 初始化验证码
			init: function() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				uni.setStorage({
					key: 'imgcode',
					data: str,
				});
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}
		},
	}
</script>
<style>
	page {
		background: #E2DFDC;
		
	}
</style>

<style scoped>
/* 	.custom {
		width: 100%;
		height: var(--status-bar-height);
		background: #ffffff !important;
	} */

	.mask {
		width: 100%;
		height: 200rpx;
	}

	.navbar_box {
		display: flex;
		align-items: center;
		position: fixed;
		top: 88rpx;
	}

	.zjt {
		width: 150rpx;
		padding-left: 30rpx;
	}

	.navbar_box>text {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		font-size: 32rpx;
		color: #ffffff;
	}

	.modular_box {
		width: 92%;
		position: relative;
	}

	.active {
		color: #1E4BD8 !important;
	}

	.binding {
		width: 90%;
		margin: 0 auto;
		padding: 18rpx 20rpx;
		border-radius: 60rpx;
		background: #FFFFFF;
	}

	.martop {
		margin-top: 50rpx;
	}

	.log_out {
		position: relative;
		width: 92%;
		margin: 90rpx auto 0;
	}

	.log_out>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #ab9880 , #d7c4aa );
		color: #ffffff90;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	
	.bgTaggle>text {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) !important;
	}

	.information {
		width: 80%;
		display: flex;
		align-items: center;
		visibility: inherit;
		margin: 70rpx auto 0;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #FF2CDF !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}
	
	.modal-content {
		width: 80%;
		height: 720rpx;
		background-color: #E0DDDA;
		border-radius: 20rpx;
		z-index: 2;
		margin: 0 auto;
	}
	
	.modal-content scroll-view {
		max-height: 450rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.modal-content .title {
		font-weight: bold;
		text-align: center;
		line-height: 2;
		font-size: 32rpx;
		padding: 20rpx 20rpx 0;
		color: #ffffff;
	}
	
	.agreement-txt {
		width: 92%;
		margin: 0 auto;
		padding: 20rpx 10rpx;
		min-height: 450rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #ffffff;
	}
	
	.close_btn {
		width: 92%;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 28rpx;
		margin: 30rpx auto 0;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) !important;
		color: #ffffff;
		border-radius: 10rpx;
		text-align: center;
	}
	
	.promptss{
		width: 600rpx;
		/* min-height: 400rpx; */
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}
	.promptss>text{
		margin-top: 40rpx;
	}
	.random{
		margin-top: 50rpx;
	}
	
	.randomP{
		width: 260rpx;
		/* background: pink; */
		padding: 20rpx   0;
		border-bottom: 1rpx solid #ffffff50;
	}
	.randomP>input{
		margin-left: 20rpx;
	}
	.prompt_tit{
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #A6A5AF;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.prompt_ntm{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93) ;
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}

	/deep/.uni-input-wrapper {
		color: #333333 !important;
	}

	/deep/.u-input--square {
		border: none !important;
		padding: 4rpx 20rpx !important;
	}

	/deep/.u-input--square {
		border: none !important;
		padding: 4rpx 20rpx !important;
	}


	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #A68A64 !important;
	}

	/deep/.u-button--mini {
		padding: 26rpx 30rpx !important;
		border-radius: 40rpx !important;
	}

	/deep/.u-button__text {
		font-size: 24rpx !important;
	}

	/deep/.uni-input-placeholder {
		position: absolute;
		top: auto !important;
		left: 10rpx !important;
		color: 999999 !important;
	}
</style>